<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <script type="javascript" src="${pageContext.request.contextPath}/layui/jquery2.1.1.js"></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/layui.js"></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js"></script>
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>系统管理</li>
    <li>员工管理</li>
    <li>修改信息</li>
  </ul>
</div>
<div class="formbody">
  <div class="formtitle"><span>员工信息</span></div>
</div>

<form class="layui-form" lay-filter="detail">


    <div class="layui-form-item" >
      <label class="layui-form-label">部门编号：</label>
      <div class="layui-input-inline">
        <input type="text" id="deptNo" lay-verify="required" name="deptNo" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">必填，不能超过30个字符</div>
      <label class="layui-form-label">部门姓名：</label>
      <div class="layui-input-inline">
        <input type="text" lay-verify="required" id="deptName" name="deptName" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">必填，不能超过30个字符</div>
    </div>

    <div class="layui-form-item" >
      <label class="layui-form-label">所属区域：</label>
      <div class="layui-input-inline">
        <select name="pno" id="provincial" lay-filter="provinceSelect" lay-verify="required">
          <option value="">请选择省份</option>
        </select>
      </div>
      <div class="layui-input-inline">
        <select name="cno" id="city" lay-filter="citySelect" lay-verify="required">
          <option value="">请选择城市</option>
        </select>
      </div>
      <div class="layui-form-mid layui-word-aux">必选</div>
    </div>



    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn btn-edit" lay-submit="" lay-filter="savBtn">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>

</form>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script>
  layui.use(['form','laydate','layer','jquery','upload','element'], function () {
    var form = layui.form
            ,laydate = layui.laydate
            ,layer = layui.layer
            ,$ = layui.jquery
            ,element = layui.element
            ,upload = layui.upload;

    //赋值省份
    $.ajax({
      url: "/area/getProvincialList",
      type: "post",
      dataType: "json",
      success: function(data) {
        console.log(data)
        //使用循环遍历，给下拉列表赋值
        $("#provincial").empty();
        $("#provincial").append(new Option("请选择",""))
        $.each(data.data,function (index,value) {
          $("#provincial").append(new Option(value.provincial,value.pno))//对应映射字段名 第一个为显示的值  第二个为value值
        });
        form.render("select")//重新渲染 固定写法
      }
    });
    //layui change 事件 选中省份给城市赋值
    form.on('select(provinceSelect)', function (data) {
      console.log(data.elem.name); //得到select name 属性
      console.log(data.value); //得到被选中的值
      //console.log(data.elem.value); //得到被选中的值
      $.ajax({
        url: "/area/getCitylList",
        type: "post",
        dataType: "json",
        data: {
          id: data.value
        },
        success: function(data) {
          console.log(data);
          //使用循环遍历，给下拉列表赋值
          $("#city").empty();
          $("#city").append(new Option("请选择",""))
          $.each(data.data,function (index,value) {
            $("#city").append(new Option(value.city,value.cno))//对应映射字段名 第一个为显示的值  第二个为value值
          });
          form.render("select")//重新渲染 固定写法
        }
      });
    });



    form.on('submit(savBtn)', function(data){
      var datas = data.field;
      console.log(datas)
      //向后台发送数据并进行添加操作
      $.ajax({
        url:"/dept/addDept",
        type:"POST",
        contentType:"application/json",
        data: JSON.stringify(datas),
        success:function(operate){
          if(operate.message!="部门添加成功"){
            layer.msg("添加成功!",{
              icon:6,
              time:500
            },function(){
              var iframeIndex = parent.layer.getFrameIndex(window.name);
              parent.layer.close(iframeIndex);
              parent.layui.table.reload('demo',{page:{curr:1}})
            });
          }else{
            layer.msg("添加失败!");
          }
          form.render();
        }})
      return false;
    });
    form.render();
  })
</script>
</body>
</html>
